<template>
	<view class="page-wrapper">
		<div class="bg"></div>
		<div class="title" :style="'height:' + navH +'px'" >
			<div @click="goBack" class="title-l">
				<image src="../../../static/img/public/left.png" mode="widthFix"></image>
			</div>
			<div class="title-c">
				
			</div>
		</div>
		<div class="content">
			<div class="content-t">
				<image src="../../../static/img/public/pay-success.png" mode="widthFix"></image>
				<span>
					<span>{{isPay? '支付成功' : '订单未支付'}}</span>
					<p>{{isPay? '感谢您的购买' : '请去详情页面支付'}}</p>
				</span>
			</div>
			<div class="content-c">
				<p class="line"></p>
				<div>
					<h3>￥{{price}}</h3>
					<ul>
						<li>
							<span>订单编号：</span>
							<p>{{sn}}</p>
						</li>
						<li>
							<span>下单时间：</span>
							<p>{{time}}</p>
						</li>
					</ul>
				</div>
			</div>
			<button class="go-detail" @click="goDetail">
				订单详情
			</button>
		</div>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navH: null,
				sn: null,
				time: null,
				isPay: null,
				price: null
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			goDetail() {
				uni.navigateTo({
					url: '../../member/myOrder/orderDetail/orderDetail?sn=' + this.sn
				})
			}
		},
		onLoad(option) {
			this.sn = option.sn;
			this.time = this.$timestampToTime(parseInt(option.time) * 1000);
			this.isPay = parseInt(option.isPay);
			this.price = option.price;
			let app = getApp();
			this.navH = app.globalData.navHeight;
		}
	}
</script>

<style>
	.page-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.page-wrapper>.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		background: linear-gradient(135deg, #0286FA 0%, #67AAFF 100%);
		z-index: -1;
	}
	.title {
		display: flex;
		align-items: flex-end;
		width: 100%;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.title>.title-l {
		width: 19rpx;
		height: 66rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
	.title>.title-l>image {
		width: 100%;
		vertical-align: middle;
	}
	.title-c {
		flex-grow: 1;
		height: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;
		color: #ffffff;
		font-size: 34rpx;
	}
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-t {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 92rpx;
	}
	.content-t>image {
		width: 79rpx;
	}
	.content-t>span {
		color: #ffffff;
		margin-left: 18rpx;
	}
	.content-t>span>span {
		font-size: 28rpx;
		display: block;
	}
	.content-t>span>p {
		font-size: 24rpx;
		display: block;
	}
	.content-c {
		margin-top: 52rpx;
		width: 642rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		padding-top: 10rpx;
	}
	.content-c>.line {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 15rpx;
		background-color: #0067D2;
		border-radius: 8rpx;
	}
	.content-c>div {
		width: 618rpx;
		background-color: #ffffff;
		border-radius: 0px 0px 22px 22px;
		box-shadow: 0 1rpx 3rpx 4rpx #EBE9E9;
		box-sizing: border-box;
		padding: 30rpx
	}
	.content-c>div>h3 {
		font-size: 48rpx;
		color: #ff4040;
		font-weight: 500rpx;
		text-align: center;
		border-bottom: 1px solid #e5e5e5;
		height: 125rpx;
		line-height: 125rpx;
	}
	.content-c>div>ul {
		width: 100%;
	}
	.content-c>div>ul>li {
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
	}
	.content-c>div>ul>li>span {
		font-size: 24rpx;
		color: #666666;
		vertical-align: middle;
		flex-shrink: 0;
	}
	.content-c>div>ul>li>p {
		flex-grow: 1;
		font-size: 24rpx;
		color: #666666;
		vertical-align: middle;
		overflow: hidden;
		text-overflow:ellipsis;
		text-align: end;
	}
	.go-detail {
		margin-top: 79rpx;
		width: 283rpx;
		height: 90rpx;
		background: linear-gradient(296deg, #0973F7 0%, #0286FA 100%);
		border-radius: 45rpx;
		font-size: 34rpx;
		color: #ffffff;
	}
	
</style>
